<template>
  <div>
    <cube-form
      :model="model"
      :schema="schema"
      :immediate-validate="false"
      :options="options"
      @validate="validateHandler"
      @submit="submitHandler"
      @reset="resetHandler"
    />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
interface validateRes{
    validity:object,
    valid:(boolean|undefined),
    invalid:boolean,
    dirty:boolean,
    firstInvalidFieldIndex:number
}
interface userInfo{
    userName: string|undefined|null,
    password: string|undefined|null,
}
@Component
export default class App extends Vue {
        private validity:object={};
        private valid:(boolean|undefined);
        private model:userInfo={
          userName: '',
          password: ''
        };

        private schema= {
          groups: [
            {
              fields: [
                {
                  type: 'input',
                  modelKey: 'userName',
                  label: '用户名',
                  rules: {
                    required: true
                  },
                  props: {
                    placeholder: '请输入用户名'
                  },
                  messages: {
                    required: '请输入用户名'
                  },
                  trigger: 'blur'
                },
                {
                  type: 'input',
                  modelKey: 'password',
                  label: '密码',
                  props: {
                    placeholder: '请输入密码',
                    type: 'password'
                  },
                  rules: {
                    required: '请输入用户名'
                  },
                  // validating when blur
                  trigger: 'blur'
                }
              ]
            },
            {
              fields: [
                {
                  type: 'submit',
                  label: '登录'
                },
                {
                  type: 'reset',
                  label: '注册'
                }
              ]
            }
          ]
        };

        private options= {
          scrollToInvalidField: true,
          layout: 'standard' // classic fresh
        }

        submitHandler (e:any) {
          e.preventDefault()
          console.log('submit', e)
        }

        validateHandler (result:validateRes) {
          this.validity = result.validity
          this.valid = result.valid
          console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)
        }

        resetHandler (e:any) {
          console.log('reset', e)
        }
}
</script>
